<template>
  <ul class="wx-cascader__ul">
    <li
      class="wx-cascader__ul__li"
      v-for="(item, index) in data"
      :key="index" @click="handleClick(index)"
      :class="{'wx-cascader__ul__active': active === index}"
    >{{item.label}}</li>
  </ul>
  <template v-if="clickData.length">
    <WxCascaderPlan :list="clickData"/>
  </template>
</template>

<script lang="ts">
import { useCascaderPlan } from '../useCascader';
import type { planType } from '../cascader.type';
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: 'WxCascaderPlan',
  props: {
    list: {
      type: Array as PropType<Array<planType>>,
      default: () => []
    }
  },
  setup(props) {
    const { handleClick, data, clickData, active } = useCascaderPlan(props);

    return {
      handleClick,
      data,
      clickData,
      active
    }
  }
})
</script>
